<script setup>
import Area from '@/components/Area'
import { ElMessage } from 'element-plus';
const props = defineProps({
  modelValue: { type: Object, default: () => ({}) },
  options: { type: Object, default: () => ({}) },
  disabled: Boolean,
  loadData: Boolean,
})

const emit = defineEmits(['update:modelValue'])

// 表单处理
const formRef = ref()
const form = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  }
})

const validator = (rule, value, cb) => cb(!value ? new Error('供应商负责人不能为空') : undefined)
const validate = async () => {
  return new Promise(resolve => {
    formRef?.value.validate((valid, fields) => {
      resolve({ model: 'finance', name: '财务信息', success: valid, message: fields })
    })
  })
}

const rowDisabled = (row) => {
  return row.default_account !== 1 && form.value.collect.some(d => d.account_type === row.account_type && d.default_account === 1)
}

const clearValidate = () => {
  formRef?.value?.clearValidate()
}
const resetFields = () => {
  formRef?.value?.resetFields()
}
defineExpose({ validate, clearValidate, resetFields, formRef })

const addCollect = () => {
  form.value.collect.push({
    currency: 'CNY'
  })
}

const deleteCollect = (index) => {
  if (form.value.collect.length <= 1) {
    ElMessage.error('至少保留一项')
    return
  }
  form.value.collect.splice(index, 1)
}
</script>

<template>
  <el-form ref="formRef" :model="form" label-position="top" :disabled="disabled" :label-width="160">
    <div class="header-title mb-4">财务信息</div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-form-item label="结算方式" prop="finance.period_id"
          :rules="[{ required: true, message: '结算方式不能为空', trigger: 'change' }]">
          <VSelect v-model="form.finance.period_id" type="period" placeholder="请选择" filterable clearable class="w-full" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="付款方式" prop="finance.payment_type"
          :rules="[{ required: true, message: '付款方式不能为空', trigger: 'change' }]">
          <VSelect v-model="form.finance.payment_type" :options="options.payment_type" placeholder="请选择" filterable
            clearable class="w-full" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="结算时间" prop="supplier_name">
          <VSelect v-model="form.finance.settlement_time" :options="options.settlement_time" placeholder="请选择" filterable
            clearable class="w-full" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="结算日期/天数" prop="supplier_name">
          <el-input-number v-model="form.finance.settlement_day" placeholder="结算日期/天数" controls-position="right" :min="0"
            :step="1" :precision="0" class="w-full" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="是否到付款" prop="supplier_name">
          <VSelect v-model="form.finance.cod_type" select :options="options.cod_type" placeholder="是否到付款" />
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="是否包邮" prop="supplier_name">
          <v-group class="grid grid-cols-3 w-full">
            <VSelect v-model="form.finance.free_shipping" select :options="options.free_shipping" placeholder="是否包邮" />
            <el-input-number v-if="form.finance.free_shipping === 3" v-model="form.finance.free_amount"
              controls-position="right" :min="0" :step="0.01" placeholder="请填写金额" :precision="2" class="w-full" />
          </v-group>
        </el-form-item>
      </el-col>
    </el-row>
    <div class="header-title mb-4">开票设置</div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-form-item label="是否开票" prop="invoice.is_invoice"
          :rules="[{ required: true, message: '是否开票不能为空', trigger: 'change' }]">
          <el-radio-group v-model="form.invoice.is_invoice" class="ml-4" @change="validate">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="开票类型" prop="invoice.invoice_type"
          :rules="[{ required: form.invoice.is_invoice === 1, message: '开票类型不能为空', trigger: 'change' }]">
          <VSelect v-model="form.invoice.invoice_type" :options="options.invoice_type" placeholder="请选择" filterable
            clearable class="w-full" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="开票人资质" prop="invoice.invoice_person_seniority"
          :rules="[{ required: form.invoice.is_invoice === 1, message: '开票人资质不能为空', trigger: 'change' }]">
          <VSelect v-model="form.invoice.invoice_person_seniority" :options="options.invoice_person_seniority"
            placeholder="请选择" filterable clearable class="w-full" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="开票人类型" prop="invoice.invoice_person_type"
          :rules="[{ required: form.invoice.is_invoice === 1, message: '不能为空', trigger: 'change' }]">
          <VSelect v-model="form.invoice.invoice_person_type" :options="options.invoice_person_type" placeholder="请选择"
            filterable clearable class="w-full" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="开票所在地址" prop="invoice.invoice_address"
          :rules="[{ required: form.invoice.is_invoice === 1, message: '开票所在地址不能为空', trigger: 'change' }]">
          <el-input v-model="form.invoice.invoice_address" placeholder="请输入"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="发票税点" prop="invoice.finance_tax"
          :rules="[{ required: form.invoice.is_invoice === 1, message: '发票税点不能为空', trigger: 'change' }]">
          <div class="flex w-full">
            <el-input-number v-model="form.invoice.finance_tax" placeholder="请输入" controls-position="right" :min="0"
              :step="0.01" :precision="2" class="w-full" />
            <span class="ml-2">%</span>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="供应商税点" prop="invoice.supplier_tax_rate"
          :rules="[{ required: form.invoice.is_invoice === 1, message: '供应商税点不能为空', trigger: 'change' }]">
          <div class="flex w-full">
            <el-input-number v-model="form.invoice.supplier_tax_rate" placeholder="请输入" controls-position="right" :min="0"
              :step="0.01" :precision="2" class="w-full" />
            <span class="ml-2">%</span>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="财务类型" prop="finance.finance_type"
          :rules="[{ required: form.invoice.is_invoice === 1, message: '财务类型不能为空', trigger: 'change' }]">
          <VSelect v-model="form.finance.finance_type" placeholder="请选择" :options="options.finance_type" class="w-full" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="一般纳税人资质认定时间" prop="invoice.tax_time"
          :rules="[{ required: form.invoice.is_invoice === 1, message: '一般纳税人资质认定时间不能为空', trigger: 'change' }]">
          <el-date-picker v-model="form.invoice.tax_time" type="date" value-format="YYYY-MM-DD" placeholder="请选择"
            class="w-full" />
        </el-form-item>
      </el-col>
    </el-row>
    <div class="header-title mb-4">收款账户信息</div>
    <div class="w-full">
      <vxe-table :data="form.collect">
        <vxe-column field="account_type" title="账户类型" :min-width="160">
          <template #default="{ row }">
            <el-radio-group v-model="row.account_type" @change="row.default_account = 2">
              <el-radio :label="1" class="m-0">对公</el-radio>
              <el-radio :label="2" class="ml-2 mr-0">对私</el-radio>
            </el-radio-group>
          </template>
        </vxe-column>
        <vxe-column field="default_account" title="默认收款账户" :min-width="110">
          <template #default="{ row, rowIndex }">
            <el-checkbox v-model="row.default_account" :true-label="1" :false-label="2"
              :disabled="rowDisabled(row)">默认</el-checkbox>
          </template>
        </vxe-column>
        <vxe-column field="bank_name" title="银行名称" :min-width="180">
          <template #default="{ row }">
            <VSelect v-model="row.bank_id" type="bank" select placeholder="请选择" filterable clearable transfer
              class="w-full" />
          </template>
        </vxe-column>
        <vxe-column field="payee" title="账户名称" :min-width="140">
          <template #default="{ row }">
            <el-input v-model="row.payee" placeholder="请输入" />
          </template>
        </vxe-column>
        <vxe-column field="id_card" title="身份证号码(对私)" :min-width="180">
          <template #default="{ row }">
            <el-input v-model="row.id_card" placeholder="请输入" />
          </template>
        </vxe-column>
        <vxe-column field="bank_address" title="支行名称/银行地址" :min-width="180">
          <template #default="{ row }">
            <el-input v-model="row.bank_address" placeholder="请输入" />
          </template>
        </vxe-column>
        <vxe-column field="bank_card" title="银行账号" :min-width="160">
          <template #default="{ row }">
            <el-input v-model="row.bank_card" placeholder="请输入" />
          </template>
        </vxe-column>
        <vxe-column field="currency" title="结算货币" :min-width="160">
          <template #default="{ row }">
            <VSelect v-model="row.currency" :options="options.currency" select placeholder="请选择" transfer
              class="w-full" />
          </template>
        </vxe-column>
        <vxe-column field="tax_account" title="是否退税账户" :min-width="130">
          <template #default="{ row }">
            <VSelect v-model="row.tax_account" :options="options.tax_account" placeholder="请选择" transfer class="w-full" />
          </template>
        </vxe-column>
        <vxe-column field="name" title="操作" fixed="right" :min-width="120">
          <template #default="{ rowIndex }">
            <el-button link type="primary" @click="addCollect">新增</el-button>
            <el-button link type="danger" @click="deleteCollect(index)">删除</el-button>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
  </el-form>
</template>
<style>
.header-title {
  font-weight: bold;
  padding-left: 6px;
  position: relative;
  font-size: 16px;
}

.header-title::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 4px;
  width: 2px;
  height: 14px;
  background: #3366F1;
}
</style>